<template>
	<div class="logo">
		<transition name="el-fade-in-linear" mode="out-in">
			<router-link :key="+collapse" class="wh-full flex-center" to="/home">
				<img :src="logo" class="w50px h50px" />
				<img :src="logoName" class="w100px h30px" />
				<!-- <span v-if="!collapse" class="title">
					{{ defaultSettings.title }}
				</span> -->
			</router-link>
		</transition>
	</div>
</template>

<script lang="ts" setup>
import defaultSettings from "@/settings";
import logo from "@/assets/logo.png";
import logoName from "@/assets/logoName.svg";

defineProps({
	collapse: {
		type: Boolean,
		required: true,
	},
});
</script>

<style lang="scss" scoped>
.logo {
	width: 100%;
	height: 90px;
	background-color: #f9fbff;
	//
	background-color: $left-sidebar-logo-background;

	.title {
		flex-shrink: 0; /* 防止容器在空间不足时缩小 */
		margin-left: 10px;
		font-size: 14px;
		font-weight: bold;
		color: white;
	}
}

.layout-top,
.layout-mix {
	.logo {
		width: $sidebar-width;
	}

	&.hideSidebar {
		.logo {
			width: $sidebar-width-collapsed;
		}
	}
}
</style>
